<template>
	<div class="add1">
			<!--添加应用信息-->
		<div class="inner">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				</el-form-item>		
				<el-form-item label="应用头像">
					<el-upload
					  ref="upload"
					  :action= "action"
					  enctype="multipart/form-data"
					  class="avatar-uploader"
					  :data="ruleForm"
					  :limit="1"
					  :auto-upload="true"
					  :show-file-list="true"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload"
					  :on-preview="handlePictureCardPreview"
					  >
					  <img v-if="ruleForm.imgSrc" :src="ruleForm.imgSrc" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>	
				<el-form-item label="应用名称" prop="name" >
					<el-input type="text" v-model="ruleForm.name" style="width:300px"></el-input>
				</el-form-item>
					<el-input v-if='hide'  v-model="ruleForm.bucket" style="width:300px"></el-input>
					<el-input v-if='hide' v-model="ruleForm.key" style="width:300px"></el-input>
					<el-input v-if='hide' v-model="ruleForm.path" style="width:300px"></el-input>
					<el-input v-if='hide' v-model="ruleForm.md5" style="width:300px"></el-input>
				<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
				  </el-form-item>
				<el-form-item label="应用描述" prop="description" style='width:400px;'>
				    <el-input v-model="ruleForm.description"  type="textarea" size='small' placeholder='填写简要描述'  :autosize="{ minRows: 2, maxRows: 4}" ></el-input>
				</el-form-item> 
			  <el-form-item  class="zb" >
				<el-button type="primary"  @click="submitForm2('ruleForm')" >修改</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	import { editApplication, checkLogin, uploadPic,getUploadUrl,getImgKey,getImgBucket  } from '../../api/api.js';
	import md5 from 'js-md5';
	let Base64 = require('js-base64').Base64;
	export default{
		name:"addEdit",
		
		data(){
			return{
				action:getUploadUrl(),
				dialogVisible: false,
				desc: '',
				ruleForm:{
					id:'',
					name:'',
					description:'',
					imgSrc:'',
					bucket:getImgBucket(),
					key:getImgKey(),
					path:'',
					md5:'',
				},
				rules:{
					name:[{required:true,message:'名称不能为空',trigger:'blur'}],
					description:[{required:true,message:'描述不能为空',trigger:'blur'}]
				},
		        value: '',
			}
		},
		methods:{
//		提交修改的应用    
		submitForm2(ruleForm) {
	        this.$refs[ruleForm].validate((valid) => {
	          if (valid) {
	          	console.log('创建应用.name......',this.ruleForm.name);
	          	console.log('创建应用.description......',this.ruleForm.description);
				this.getUsers();
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
//	    图片路径  
	    getImgSrc(imgPath){
			return window.Config.baseUrl+"/appinimageservice/storage/"+window.Config.imgBucket+"/"+window.Config.imgKey+"/"+imgPath+"?json="
		},
	    //应用的修改
		getUsers() {
			let para = {
				name: this.ruleForm.name,
				description: this.ruleForm.description,
				id: this.ruleForm.id,
				logoUrl: this.ruleForm.path
			};
			this.listLoading = false;
			editApplication(para).then((res) => {
				if(res.code ==='0000'){
					this.open()
				}else if(res.code ==='2001'){
					this.openError('应用名称已存在！');
				}else if(res.code ==='2002'){
					this.openError('应用名称不存在！');
				}
			});
		},
		uploadPicture(){
			var file = document.getElementById("logofile").files[0];  
			var para = new FormData();// 创建form对象  
			para.append('file',file);// 通过append向form对象添加数据,可以通过append继续添加数据  
			uploadPic(para).then((res) => {
				console.log('图片上传。。。',res);
			})
		},
	//成功提示信息
		open() {
	        this.$message({
		          message: '修改成功',
		          type: 'success'
		        });
	    		this.$router.push('/apply/list');
     	 },		
 	//失败提示信息
		openError(msg) {
	        this.$message({
		          message:msg,
		          type: 'error'
		        });
     	 },		
		handleAvatarSuccess(res, file) {
				console.log(file);
				this.ruleForm.imgSrc = URL.createObjectURL(file.raw);
		},
			beforeAvatarUpload(file) {
				console.log(file);
				var imgPath = this.getNowTime() + file.name.substring(file.name.lastIndexOf("."));
				this.ruleForm.path =Base64.encode(imgPath);
				this.ruleForm.md5 = md5(imgPath);
				//alert(this.action);
//				let uploadURL = 'https://jsonplaceholder.typicode.com/posts/'
//				this.action= uploadURL
//				alert(this.action);
			},			
			handleRemove(file, fileList) {
	        	console.log(file, fileList);
		    },
		    handlePictureCardPreview(file) {
		        this.dialogImageUrl = file.url;
		        this.dialogVisible = true;
		        this.imageUrl = URL.createObjectURL(file.raw);
		    },
		    getNowTime(){
		    	return new Date().getTime();
		    },		     
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					this.$router.push('/apply/list');
					// if (valid) {
					// 	var name=this.ruleForm.name;
					// 	var img=this.imageUrl;
					// 	console.log(name,img);
					// 	var storage=window.localStorage;
					// 	storage['img']=img;
					// 	storage['name']=name;
					// 	this.$router.push('/apply/list');
					// } else {
					// 	console.log('error submit!!');
					// 	return false;
					// }
				});
			},
		},
		mounted() {
			if(checkLogin(this)){
				var self = this;
				// 获取用户
				let ApplicationEditor = sessionStorage.getItem('ApplicationEditor');
				if(ApplicationEditor) {
					ApplicationEditor = JSON.parse(ApplicationEditor);
					console.log(ApplicationEditor);
					//self.ruleForm=ApplicationEditor;
					self.ruleForm.id = ApplicationEditor.id;
					self.ruleForm.name = ApplicationEditor.name;
					self.ruleForm.imgSrc = ApplicationEditor.imgSrc;
					self.ruleForm.path = ApplicationEditor.logoUrl;
					self.ruleForm.description = ApplicationEditor.description;
				}
			}	
		}
	}
</script>
<style scoped>
	.el-button--primary{ font-size:20px; }
	.inner{ margin:80px;font-weight:bolder;margin-left:200px;}
	.tit{ margin-bottom:60px;font-size:20px;}
	.zb{ margin-left:90px;margin-top:60px;}
	  .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
   }
	.avatar-uploader .el-upload:hover {
	   border-color: #409EFF;
	}
	  .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	  }
	  .avatar {
		height: 178px;
		width: 267px;
		border-radius:5px;
		display: block;
	  }
</style>
